<template>
  <div class="home">
    <div class="header">
      <img :src="shops.avatar" alt="" style="filter:blur(3px)" />
      <div class="header-count">
        <img :src="shops.avatar" alt="" @click="openShop" />
        <div class="header-count-right">
          <div>
            <van-tag type="danger">品牌</van-tag>
            <span>{{ shops.name }}</span>
          </div>
          <p class="description">
            {{ shops.description }}/{{ shops.deliveryTime }}分钟送达
          </p>
          <p class="supports">
            <van-tag type="primary" color="#fff" text-color="red">减</van-tag>
            <span class="span" v-for="item in shops.supports" :key="item">{{
              item
            }}</span>
            <span>
              <van-tag round type="primary" color="rgba(0,0,0,.5)"
                >2个<van-icon name="arrow"
              /></van-tag>
            </span>
          </p>
        </div>
      </div>
      <div class="text">
        <p class="notice">公告</p>
        <van-notice-bar class="van-notice-bar" :text="shops.bulletin" />
        <van-icon name="arrow" class="van-icon" />
      </div>
    </div>
    <van-tabs v-model="active" color="#f0c538">
      <van-tab
        :title="obj.name"
        v-for="obj in menus"
        :key="obj.name"
        :to="obj.to"
      ></van-tab>
    </van-tabs>

    <router-view></router-view>

    <!-- 底部 -->
    <div class="base-nav">
      <div class="nav-left">
        <p class="basc-nav-left">
          <van-icon name="smile-o" size="20px" />
          <span>联系商家</span>
        </p>
        <p class="cut-off"></p>
      </div>
      <div class="nav-right">
        <van-tag type="primary" color="#333333"
          ><van-icon name="shopping-cart" color="#999999" size="30px"
        /></van-tag>
        <div class="right-money">
          <p style="font-size: 20px; color: #fff">￥999</p>
          <span>另需配送费￥4元 | 支持自取</span>
        </div>
        <p style="font-size: 12px">￥20元起送</p>
      </div>
    </div>

    <van-overlay :show="show" @click="show = false">
      <div>
        <h2>{{ shops.name }}</h2>
        <van-rate
          v-model="shops.score"
          :size="25"
          color="#ffd21e"
          void-icon="star"
          void-color="#eee"
        />
        <p>  <van-divider
          :style="{
            color: '#fff',
            borderColor: '#fff',
            padding: '0 16px',
            fontSize:'20px',
            fontWeight:'bold',
            marginBottom:'20px',
          }"
          
        >
          优惠信息
        </van-divider></p>
        <p v-for="item in shops.supports" :key="item" class="onSale">{{item}}</p>
         <p>  <van-divider
          :style="{
            color: '#fff',
            borderColor: '#fff',
            padding: '0 16px',
            fontSize:'20px',
            fontWeight:'bold',
            marginBottom:'20px',
          }"
          
        >
          商家公告
        </van-divider></p>
        <p class="affiche">{{shops. bulletin}}</p>
      </div>
    </van-overlay>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
interface Itabs {
  name: String;
  to: String;
}
import { $_getGoods } from "../../api/goods";
// 店铺信息对象约束
interface IShop {
  avatar?: string; // 店铺头像
  bulletin?: string; // 店铺描述
  date?: Array<string>; // 营业时间
  deliveryPrice?: number; // 配送费
  deliveryTime?: number; // 送达时间
  description?: string; // 配送方式
  id?: number; //
  minPrice?: number; // 起送费
  name?: string; // 商品名字
  pics?: Array<string>; // 店铺图片
  score?: number; // 店铺评分
  sellCount?: number;
  supports?: Array<string>;
}
@Component({})
export default class Home extends Vue {
  show: Boolean = false;

  active: number = 0;
  menus: Array<Itabs> = [
    { name: "商品", to: "/home/goods" },
    { name: "评价", to: "/home/evaluate" },
    { name: "商家", to: "/home/merchant" },
  ];
  // 活动数组长度

  shops: IShop = {};
  async created() {
    let res = await $_getGoods();
    // console.log(res.data.avatar);
    let { data } = res.data;
    // data.avatar = data.avatar.replace('127.0.0.1','192.168.53.96')
    this.shops = data;
    // console.log(this.shops);
  }
  openShop() {
    this.show = true;
  }
}
</script>

<style lang="scss" scoped>
.affiche{
  text-align: left;
}
.onSale{
  text-align: left;
  margin-bottom: 10px;
}
.van-overlay {
  color: #fff;
  padding: 30px 20px;
  text-align: center;
}
.van-rate {
  margin: 10px 0;
}
.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.van-tabs {
  width: 100%;
  height: 44px;
  border-bottom: 2px solid #ccc;
  // margin-bottom: 20px;
}
.base-nav {
  width: 95%;
  height: 60px;
  line-height: 60px;
  background: #000;
  border-radius: 30px;
  position: fixed;
  bottom: 20px;
  left: 10px;
  color: #fff;
  display: flex;
  justify-content: space-around;
  font-size: 14px;
}
.base-nav .cut-off {
  width: 5px;
  height: 100%;
  background: #fff;
  margin-left: 10px;
}
.basc-nav-left {
  display: flex;
  color: #fff;
  flex-direction: column;
  font-size: 12px;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin-left: 18px;
}
.nav-left {
  width: 90px;
  display: flex;
}
.nav-right {
  flex: 1;
  display: flex;
}
.right-money {
  height: 100%;
  font-size: 12px;
  line-height: 20px;
  color: #717171;
  padding-top: 10px;
}

.nav-right .van-tag {
  margin: 0;
  margin-top: 5px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 50px;
}

.basc-nav-left .van-icon {
  line-height: 20px;
  width: 15px;
}
.basc-nav-left span {
  line-height: 20px;
}
.header {
  position: relative;
  font-size: 14px;
  width: 100%;
  height: 160px;
}
.header > img {
  width: 100%;
  height: 160px;
  opacity: 0.5;
}
.text {
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  color: #ffff;
  line-height: 40px;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
}
.notice {
  height: 20px;
  line-height: 20px;
  background: #fff;
  color: black;
  margin: 10px;
  padding: 0px 10px;
  width: 52px;
}
.van-notice-bar {
  white-space: nowrap;
  text-overflow: ellipsis;
  background: none;
  color: #fff;
  flex: 1;
}
.van-icon {
  width: 30px;
  line-height: 40px;
}
.header-count {
  position: absolute;
  top: 10%;
  left: 10%;
  display: flex;
}
.header-count > img {
  width: 80px;
  height: 80px;
  margin-right: 20px;
}
.van-tag {
  margin-right: 20px;
}
.van-tag .van-icon {
  line-height: 20px;
  width: 20px;
}
.header-count-right {
  display: flex;
  flex-direction: column;
}
.description {
  margin: 10px 0;
}
.supports {
  display: flex;
  align-items: center;
}
.supports .span {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 50px;
}
.supports .van-tag {
  text-align: center;
}
</style>